<template>
	<view>
		<view class="lb-map">
			<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<tabbar :numb="1"></tabbar>
	</view>
</template>

<script>
	import {
		getNearbyStoresApiMap,
	} from '@/api/apis/wash.js';

	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
			}
		},
		methods: {
			//获取经纬度
			getVLocation() {
				let _this = this;
				if (this.currentLocation && this.currentLocation != undefined) {
					// return;
				}
				uni.getLocation({
					type: "gcj02", //wgs84 gcj02
					altitude: true,
					success(res) {
						console.log(res)
						let location = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						// console.log(location);
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						_this.$u.vuex('currentLocation', location)
					}
				});
			},
			markertap(e) {
				console.log(e, 'markertap')
			},
			// labeltap(e){
			// 	console.log(e,'labeltap')
			// },
			callouttap(e) {
				console.log(e, 'callouttap')
			},

			//获取地图数据
			getMap() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				getNearbyStoresApiMap().then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let data = res.data;
						let newArr = []
						data.stores.forEach((val, key) => {
							newArr.push({
								id: 'store_' + val.id,
								latitude: val.latitude,
								longitude: val.longitude,
								width: 24,
								height: 24,
								iconPath: '/static/icon/map-new.png',
								// callout: { //自定义标记点上方的气泡窗口 点击有效
								// 	content: val.name, //文本
								// 	color: '#333333', //文字颜色
								// 	fontSize: 9, //文本大小
								// 	borderRadius: 5, //边框圆角
								// 	borderWidth: '10',
								// 	bgColor: '#FFFFFF', //背景颜色
								// 	display: 'ALWAYS', //常显
								// },
							})
						})
						data.distributor.forEach((val, key) => {
							newArr.push({
								id: val.id,
								latitude: val.latitude,
								longitude: val.longitude,
								width: 24,
								height: 24,
								iconPath: '/static/icon/map-new.png',
								// callout: { //自定义标记点上方的气泡窗口 点击有效
								// 	content: val.name, //文本
								// 	color: '#333333', //文字颜色
								// 	fontSize: 9, //文本大小
								// 	borderRadius: 5, //边框圆角
								// 	borderWidth: '10',
								// 	bgColor: '#FFFFFF', //背景颜色
								// 	display: 'ALWAYS', //常显
								// },
							})
						})
						console.log(newArr)
						this.covers = newArr;
					}
				})
			},
		},
		onLoad() {
			if (this.currentLocation && this.currentLocation != 'undefined') {
				this.latitude = this.currentLocation.latitude;
				this.longitude = this.currentLocation.longitude;
			}
			this.getVLocation();
			this.getMap();
		},
	}
</script>

<style lang="scss">
	.lb-map {
		width: 100%;
		height: 100vh;
	}
</style>